<template>
  <div class="container">
    <el-card class="container-form">
      <el-form label-suffix="：">
        <el-form-item label="筛选" required>
          <el-button-group>
            <el-button
              :type="notcheck"
              size="mini"
              @click="handleType('notcheck')"
              >待支付
            </el-button>
            <el-button :type="check" size="mini" @click="handleType('check')"
              >已取消
            </el-button>
            <el-button
              :type="notpass"
              size="mini"
              @click="handleType('notpass')"
              >已付款
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="container-result">
      <thy-caption title="查询结果" margin> </thy-caption>
      <el-table
        size="small"
        stripe
        border
        ref="multipleTable"
        :data="list"
        v-loading="loading"
      >
        <el-table-column prop="id" label="序号" width="60" align="center">
        </el-table-column>
        <el-table-column prop="order_id" label="订单号" width="240">
        </el-table-column>
        <el-table-column prop="body" label="商品" width="140">
        </el-table-column>
        <el-table-column prop="address" label="收货地址"> </el-table-column>
        <el-table-column prop="count" label="数量" width="60">
        </el-table-column>
        <el-table-column prop="total_fee" label="总费用" width="80">
        </el-table-column>
        <el-table-column prop="user_id" label="用户ID" width="240">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="60" fixed="right">
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :current-page="page"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'computer',
  data() {
    return {
      loading: true,
      list: [],
      total: 0,
      page: 1,
      notpass: 'info',
      notcheck: 'primary',
      check: 'info',
      currentpage: 0
    };
  },
  methods: {
    getList(page, status, callback = () => {}) {
      this.loading = true;
      this.$request
        .get('/admin/order/list?page=' + page + '&pageSize=10&status=' + status)
        .then(data => {
          this.list = data.rows.map(cardinfo => {
            if (cardinfo.status == 0) {
              cardinfo.status = '待支付';
            } else if (cardinfo.status == 1) {
              cardinfo.status = '已取消';
            } else {
              cardinfo.status = '已付款';
            }

            if (cardinfo.address) {
              cardinfo.address = JSON.parse(cardinfo.address);
              cardinfo.address =
                cardinfo.address.provinceStr +
                cardinfo.address.cityStr +
                cardinfo.address.areaStr +
                cardinfo.address.address +
                '_' +
                cardinfo.address.code +
                '_' +
                cardinfo.address.linkMan +
                '_' +
                cardinfo.address.mobile;
            }
            return cardinfo;
          });
          this.total = data.count;
          this.page = page;
          callback(data);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCurrentChange(page) {
      this.getList(page, this.currentpage);
    },
    handleButton(info, status) {
      return this.$request
        .post('/admin/order/update', {
          id: info.id,
          status: status
        })
        .then(() => {
          this.getList(this.page, this.currentpage);
        });
    },
    handleType(type) {
      if (type == 'notpass') {
        this.getList(1, 2, () => {
          this.notpass = 'primary';
          this.notcheck = 'info';
          this.check = 'info';
          this.currentpage = 2;
        });
      } else if (type == 'notcheck') {
        this.getList(1, 0, () => {
          this.notpass = 'info';
          this.notcheck = 'primary';
          this.check = 'info';
          this.currentpage = 0;
        });
      } else {
        this.getList(1, 1, () => {
          this.notpass = 'info';
          this.notcheck = 'info';
          this.check = 'primary';
          this.currentpage = 1;
        });
      }
    }
  },
  mounted() {
    this.getList(1, 0);
  }
};
</script>

<style>
</style>
